<!--
- Author:  LiShibin.
- Date:    2018/4/18 0018.
- File:    identify.
-->
<template>
  <div>
    <div class="Web_Box">
      <!--<div class="Auditstatus">信息审核中...</div>-->
      <div class="Auditstatus">实名认证</div>
      <div v-show="memberInfo.is_verify_idcard == '3'" style="text-align: center; color: red;">审核失败原因：{{memberInfo.idcard_remark}}</div>
      <div class="Realauthentication">
        <h3><span>*</span>选择证件类型</h3>
        <div>
          <select  placeholder="请选择证件类型" v-model="idcardType" style="border: none; height: 40px; line-height: 40px; width: 100%;">
            <option value="1">大陆二代居民身份证</option>
            <option value="2">港澳台通行证</option>
            <option value="3">护照</option>
          </select>
        </div>
        <h3><span>*</span>填写姓名</h3>
        <div class="login_ipt">
          <input type="text" placeholder="姓名" v-model="name">
        </div>
        <h3><span>*</span>填写证件号码</h3>
        <div class="login_ipt">
          <input type="text" placeholder="证件号码" v-model="IDCard" @blur="checkIDCard">
        </div>
        <h3><span>*</span>本人银行卡信息</h3>
        <div class="login_ipt">
          <input type="text" placeholder="开户行" v-model="bankName">
        </div>
        <div class="login_ipt">
          <input type="tel" placeholder="银行卡号" v-model="bankCard">
        </div>
        <div class="login_ipt">
          <input type="text" placeholder="银行卡姓名" v-model="bankCardMemberName">
        </div>
        <h3><span>*</span>上传证件正面</h3>
        <div class="realphoto">
          <input type="file" @change="fileSelected($event, 'IDCardPic1')"><img :src="IDCardPic1 ? $config.website + $config.uploadImgSrc + IDCardPic1 : IDCardPic1Default">
          <div class="Maskbox"><i class="iconfont icon-tianjia"></i></div>
        </div>
        <h3><span>*</span>上传证件反面</h3>
        <div class="realphoto">
          <input type="file" @change="fileSelected($event, 'IDCardPic2')"><img :src="IDCardPic2 ? $config.website + $config.uploadImgSrc + IDCardPic2 : IDCardPic2Default">
          <div class="Maskbox"><i class="iconfont icon-tianjia"></i></div>
        </div>
        <!--<h3><span>*</span>上传手持证件照片</h3>-->
        <!--<div class="realphoto">-->
          <!--<input type="file" @change="fileSelected($event, 'IDCardPic3')"><img :src="IDCardPic3 ? $config.website + $config.uploadImgSrc + IDCardPic3 : IDCardPic3Default">-->
          <!--<div class="Maskbox"><i class="iconfont icon-tianjia"></i></div>-->
        <!--</div>-->
        <h3><span>*</span>上传银行卡照片</h3>
        <div class="realphoto">
          <input type="file" @change="fileSelected($event, 'bankCardPic')"><img :src="bankCardPic ? $config.website + $config.uploadImgSrc + bankCardPic : bankCardPicDefault">
          <div class="Maskbox"><i class="iconfont icon-tianjia"></i></div>
        </div>
      </div>
      <div class="Remarks">说明：上传的照片需确保字迹清晰可见，实名认证审核时间为8:00-23:00期间，请关注审核结果，审核通过则显示“已认证”，已认证的才属于有效用户。</div>
    </div>
    <div class="BottomGd" style="text-align: center; margin: 0; padding: 0; font-size: 0">
      <span class="but_2 wauto disb tc" style="display: inline-block; width: 50%; margin: 0; padding: 0" href="javascript:void(0)" @click="submit">提交</span>
      <span class="but_2 wauto disb tc" style="display: inline-block; width: 50%; margin: 0; padding: 0; background-color: #aaa" href="javascript:void(0)" @click="back">返回</span>
    </div>
  </div>
</template>

<script>
  import * as request from '../../request'

  export default{
    beforeRouteEnter (to, from, next) {
      request.getMemberInfo().then(data => {
        if (data.is_verify_idcard != '0') {
          next(vm => {
            vm.memberInfo = data
            vm.idcardType = data.idcard_type || '1'
            vm.name = data.member_truename
            vm.IDCard = data.cardno
            vm.bankName = data.bank_deposit
            vm.bankCard = data.bank_accoount
            vm.bankCardMemberName = data.bank_member_name
            vm.IDCardPic1 = data.idcard_front_image
            vm.IDCardPic2 = data.idcard_back_image
            // vm.IDCardPic3 = data.idcard_hand_image
            vm.bankCardPic = data.bank_image
          })
        } else {
          next(vm => {
            vm.memberInfo = data
          })
        }
      }).catch(e => {
        next()
      })
    },
    data() {
      return {
        memberInfo: {},
        idcardType: '1', // 1: 大陆二代居民身份证 2: 港澳台通行证 3: 护照
        name: '',
        IDCard: '',
        bankName: '',
        bankCard: '',
        bankCardMemberName: '',
        IDCardPic1: '',
        IDCardPic2: '',
        // IDCardPic3: '',
        bankCardPic: '',
        IDCardPic1Default: require('../../assets/images/PhotoIDcard1.png'),
        IDCardPic2Default: require('../../assets/images/PhotoIDcard2.png'),
        // IDCardPic3Default: require('../../assets/images/PhotoIDcard3.png'),
        bankCardPicDefault: require('../../assets/images/PhotoIDcard4.png')
      }
    },
    created() {
      console.log(this.$data['name'])
    },
    components: {},
    methods: {
      checkIDCard(value) {
        if (!this.IDCard) {
          return
        }
        this.$request.checkIDCard(this.IDCard).then(data => {}).catch(e => {
          this.$toast('该证件号码已绑定帐号，请使用其他')
        })
      },
      back() {
        this.$router.go(-1)
      },
      submit() {
        if (!this.name) {
          this.$toast('请填写姓名')
          return
        }
        if (this.idcardType == '1' && !this.$validator.idCard(this.IDCard)) {
          this.$toast('请填写正确的身份证号')
          return
        }
        if (this.idcardType != '1' && !this.IDCard) {
          this.$toast('请填写证件号')
          return
        }
        if (!this.bankName) {
          this.$toast('请填写开户行')
          return
        }
        if (!this.bankCard) {
          this.$toast('请填写银行账号')
          return
        }
        if (!this.bankCardMemberName) {
          this.$toast('请填写银行卡姓名')
          return
        }
        if (!this.IDCardPic1) {
          this.$toast('请上传证件正面照片')
          return
        }
        if (!this.IDCardPic2) {
          this.$toast('请上传证件反面照片')
          return
        }
        // if (!this.IDCardPic3) {
        //   this.$toast('请上传手持证件照片')
        //   return
        // }
        if (!this.bankCardPic) {
          this.$toast('请上传银行卡照片')
          return
        }
        let params = {
          member_truename: this.name,
          idcard_type: this.idcardType,
          cardno: this.IDCard,
          idcard_front_image: this.IDCardPic1,
          idcard_back_image: this.IDCardPic2,
          // idcard_hand_image: this.IDCardPic3,
          bank_image: this.bankCardPic,
          bank_deposit: this.bankName,
          bank_accoount: this.bankCard,
          bank_member_name: this.bankCardMemberName
        }
        console.log(params)
        this.$request.identify(params).then(data => {
          this.$toast('提交成功，等待管理员审核...')
          this.$router.push({name: 'my'})
        }).catch(e => {
          this.$toast(e.msg)
        })
      },
      fileSelected(e, dataName) {
        try {
          var reader = new window.FileReader()
          reader.onload = (e) => {
            if (e.total > 1024 * 1024 * 20) {
              this.$toast('图片大小不能超过20M')
              return
            }
            // 调用图片压缩方法
            // console.log("成功加载图片，开始压缩图片...")
            this.$indicator.open('上传中...')
            this.$utils.compressAndRotate(e.target.result, (imgDataUrl) => {
              // todo 调用上传图片接口
              this.$request.uploadImg(imgDataUrl).then(data => {
                this.$data[dataName] = data[0]
//                if (this.imgAction == 'update') {
//                  this.content[this.editIndex].value = data[0]
//                } else {
//                  this.addImgBlock(data)
//                }
                this.$indicator.close()
              }).catch(e => {
                this.$indicator.close()
                this.$toast('上传图片失败:' + e.msg)
              })
            }, 1)
          }
          // 选取同名文件不会再次触发change事件，所以在加载后替换input控件
          reader.onloadend = (e) => {
//            this.clearInputFile()
          }
          reader.readAsDataURL(e.target.files[0])
        } catch (e) {
          console.log('读取图片文件发生了错误')
          console.log(e)
        }
      }
    }
  }
</script>

<style>

</style>